<template>
  <div class="operateBox">
    <van-overlay :show="isShow" @click="handleClose" :lock-scroll="false">
      <div class="wrapper">
        <div class="block" :class="animation" @click.stop ref="blockRef">
          <div class="slideButton" @click="clickMe($event)"></div>
          <slot></slot>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script setup>
// 作者：YCH
// 时间：2022年10月30日 15:16:45
import { ref, nextTick } from "vue";
const props = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
});

// 关闭
const emit = defineEmits(["handleClose"]);
const handleClose = () => {
  animation.value = 'fade-close'
  emit("handleClose", false);
  setTimeout(()=>{
    animation.value = 'fade-open'
  },500)
};

const blockRef = ref();
const animation = ref('fade-open');

// 点击按钮执行下滑动画
const clickMe = (event) => {
  handleClose()
};
</script>

<style lang="less" scoped>
.wrapper {
  display: flex;
  justify-content: center;
  height: 90%;
  align-items: flex-end;
}
// 往上出现
@keyframes top-move {
  from {
    opacity: 0;
    -webkit-transform: translate(0, 500px); /* Safari */
    transform: translate(0, 500px); /* 标准语法 */
  }
  to {
    opacity: 1;
    -webkit-transform: translate(0, 10px); /* Safari */
    transform: translate(0, 10px); /* 标准语法 */
  }
}
// 往下消失
@keyframes bottom-move {
  from {
    opacity: 1;
    -webkit-transform: translate(0, 10px); /* Safari */
    transform: translate(0, 10px); /* 标准语法 */
  }
  to {
    opacity: 0;
    -webkit-transform: translate(0, 500px); /* Safari */
    transform: translate(0, 500px); /* 标准语法 */
  }
}
// 下滑动画
.fade-open {
  position: absolute;
  animation: top-move 0.3s linear;
}

.fade-close {
  position: absolute;
  animation: bottom-move 0.3s linear;
}
.block {
  width: 90%;
  border-radius: 10px;
  background-color: #fff;
  .slideButton {
    margin: 0 auto;
    margin-top: 4px;
    height: 6px;
    width: 30px;
    background-color: var(--van-search-content-background-color);
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 1%);
  }
}
</style>
